<template>
  <div class="quanbu">
    <div class="header">
      <h5>活动菜单</h5>
    </div>
    <div class="contentDiv">
      <!-- <el-select v-model="valueType" placeholder="请选择" @change="changeOption($event)" size="mini">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select> -->
      <div class="rightDiv">
        <span id="title">关键字查询:</span>
        <!-- <el-input v-model="inputdata" placeholder="请输入内容"></el-input> -->
        <el-input  size="mini" placeholder="请输入内容" type="text" v-model="inputda" :change="gaibian(1,5)"></el-input>
      </div>
    </div>
    
    <div>
      <el-table :data="tabledata" stripe border style="width: 100%" @cell-click="cellHandleclick">
        <el-table-column prop="aId" label="ID" width="100">
        </el-table-column>
        <el-table-column prop="aName" label="活动菜单名称" width="100" >
        </el-table-column>
        <el-table-column prop="aDescription" label="活动内容" width="360" >
        </el-table-column>
        <el-table-column prop="aImg" label="活动图标" width="250">
          <template slot-scope="scope">
              <!-- scope.row获取当前行所有数据 作用域插槽获取当前行的数据（可以是图片连接如下：:src="scope.row.iconImgLarge"） -->
              <el-image style="width: 50px; height: 50px" :src="ip+scope.row.aImg" fit=""></el-image>
              <!-- {{scope.row.aImg}} -->
            </template>
        </el-table-column>
        <el-table-column prop="aDate" label="活动日期" width="310">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <i class="el-icon-edit" style="font-size: 15px; color:blue" @click="edit(row)"></i>
            <i class="el-icon-delete" style="font-size: 15px;color:blue;margin-left: 10px" @click="deleteRow(row.aId)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
const $host = 'http://132.232.110.185/personnelManagement'

export default {
  created(){
    this.getRequestData( this.page,this.limit)
    
   
  },
  data() {
    
    return {
      ip:'http://132.232.110.185/personnelManagement/upload/',
      inputda:'',
      options:'',
      tabledata: [],
      page:1,
      limit:5,
      // valueType:''
    }
  },
  methods: {
    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
    // handleDelete(index, row) {
    //   console.log(index, row);
    // }
    gaibian(page,limit){
      
      axios({
        method:'post',
        url:`${$host}/activations/activationSelect/${page}/${limit}/{a_name}`,
        params:{
          aName:this.inputda,
        }
      }).then(res =>{
        this.tabledata=res.data.data
        
      })    
      .catch(err => {
          console.log(err)
        })
      
    },
  
    cellHandleclick(row, column, cell, event) {
	    console.log(column);
	    console.log(cell);
	    console.log(event);
	    //如果规定点击某一列执行，利用column中的label属性
	    if(column.label === '标题') {
        this.$router.push({
        name:"mubiaoneirong",
        params:{
          row
        }
        })
    }
  },

    edit(row){
      this.$router.push({
        name:"xiugaiActivity",
        params:{
          row
        }
      })
    },
    deleteRow(id){
      axios({
        method:'post',
        url:`${$host}/activations/activationDelete`,
        params:{
          aId:id
        }
      }).then(res =>{
        console.log(res)
      })    
      .catch(err => {
          console.log(err)
        })
      
    },
    async getRequestData( page, limit ) {
      await axios.get(`${$host}/activations/activationAll/${page}/${limit}`)
        .then(res => {
          // if (limit > 1000) ctx.commit("saveAllData", res.data.data)
          // ctx.commit("saveData", res.data.data)
          this.tabledata=res.data.data
          console.log(this.tabledata)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  .header{
  width: 100%;
  height: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom:1px solid #cfd1d2;
}
#title{
  font-size: 12px;
  margin-right: 7px;
}
  .contentDiv{
  padding:10px ;
}
.rightDiv{
  float: right;
}
.quanbu{
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  
}
.el-input--mini{
   width: 190.8px;
   height: 30px;
 }
 .el-select{
   width: 73px;
   height: 30px;
 }
 .footer{
   width: 100%;
   height: 34px;
   line-height: 34px;
 }
</style>